<template>
  <div>
    <el-row>
      <el-col :span="5">
        <el-button type="primary" @click="dialogFormVisible = true">新增用例</el-button>
        <el-dialog title="新增用例" :visible.sync="dialogFormVisible">
          <el-form :model="create_case_form">
            <el-form-item label="功能模块名称" :label-width="formLabelWidth">
              <el-input v-model="create_case_form.module_name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="标题" :label-width="formLabelWidth">
              <el-input v-model="create_case_form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="优先级" :label-width="formLabelWidth">
              <el-input v-model="create_case_form.priority" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="前置条件" :label-width="formLabelWidth">
              <el-input v-model="create_case_form.precondition" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="操作步骤" :label-width="formLabelWidth">
              <el-input v-model="create_case_form.operating_steps" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="预期结果" :label-width="formLabelWidth">
              <el-input v-model="create_case_form.expected_result" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="实际结果" :label-width="formLabelWidth">
              <el-input v-model="create_case_form.actual_result" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="测试结果" :label-width="formLabelWidth">
              <el-input v-model="create_case_form.test_result" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="缺陷" :label-width="formLabelWidth">
              <el-input v-model="create_case_form.bug" autocomplete="off"></el-input>
            </el-form-item>


          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="create_case">确 定</el-button>
          </div>
        </el-dialog>
      </el-col>
      <el-col :span="10"> <el-form :inline="true" :model="examine_case_data" ref="examine_case_data" class="demo-form-inline">
        <el-form-item label="用例优先级">
          <el-input  placeholder="请输入用例优先级搜索" v-model="examine_case_data.priority"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="examine_case">查询</el-button>
        </el-form-item>
      </el-form></el-col>
    </el-row>


    <el-table
      :data="tableData"
      border
      style="width: 100%; margin: 20px 0">
      <el-table-column  prop="create_time" label="创建日期" width="150"></el-table-column>
      <el-table-column  prop="module_name" label="功能模块" width="150"></el-table-column>
      <el-table-column  prop="title" label="用例标题" width="150"></el-table-column>
      <el-table-column  prop="priority" label="优先级" width="150"></el-table-column>
      <el-table-column  prop="precondition" label="前置条件" width="150"></el-table-column>
      <el-table-column  prop="operating_steps" label="操作步骤" width="150"></el-table-column>
      <el-table-column  prop="expected_result" label="预期结果" width="150"></el-table-column>
      <el-table-column  prop="actual_result" label="实际结果" width="150"></el-table-column>
      <el-table-column  prop="test_result" label="测试状态" width="150"></el-table-column>
      <el-table-column  prop="bug" label="缺陷" width="150"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEdit(scope.$index, scope.row)" size="mini">编辑</el-button>
          <el-dialog title="用例编辑" :visible.sync="up_dialogFormVisible">
            <el-form :model="update_case_form" >
              <el-form-item label="id" :label-width="formLabelWidth" >
                <el-input v-model="update_case_form.id" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="功能模块名称" :label-width="formLabelWidth">
                <el-input v-model="update_case_form.module_name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="标题" :label-width="formLabelWidth">
                <el-input v-model="update_case_form.title" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="优先级" :label-width="formLabelWidth">
                <el-input v-model="update_case_form.priority" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="前置条件" :label-width="formLabelWidth">
                <el-input v-model="update_case_form.precondition" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="操作步骤" :label-width="formLabelWidth">
                <el-input v-model="update_case_form.operating_steps" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="预期结果" :label-width="formLabelWidth">
                <el-input v-model="update_case_form.expected_result" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="实际结果" :label-width="formLabelWidth">
                <el-input v-model="update_case_form.actual_result" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="测试结果" :label-width="formLabelWidth">
                <el-input v-model="update_case_form.test_result" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="缺陷" :label-width="formLabelWidth">
                <el-input v-model="update_case_form.bug" autocomplete="off"></el-input>
              </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel" >取 消</el-button>
              <el-button type="primary" @click="update_case">确 定</el-button>
            </div>
          </el-dialog>

          <el-button
            size="mini"
            type="primary"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "Case",
    methods: {
      update_case(){
        this.$xin.post(this.http+"/v1/case/update_case", this.update_case_form).then(res=>{
          this.up_dialogFormVisible = false;
          this.refresh();
        })
      },
      create_case(){
        this.$xin.post(this.http+"/v1/case/create_case", this.create_case_form).then(res=>{
          this.dialogFormVisible = false;
          this.refresh();
        })
      },
      handleEdit(index, row) {
        this.up_dialogFormVisible = true;
        console.log(index, row);
        this.update_case_form=row
      },
      cancel(){
        this.up_dialogFormVisible = false;
        this.refresh();
      },

      handleDelete(index, row) {
        this.$xin.post(this.http+"/v1/case/del_case", {"id":row.id}).then(res=>{
          console.log(res.data);
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.refresh();
        }).catch(err => {})
      },

      examine_case(){
        this.$xin.post(this.http+"/v1/case/examine_case", this.examine_case_data).then((res)=>{
          this.tableData=res.data;
        }).catch((er)=>{
          //失败处理
        })
      },
      //页面刷新
      refresh(){
        this.$xin.post(this.http+"/v1/case/examine_case", {priority:""}).then(res=>{
          this.tableData=res.data;
        })
      }
    },
// 实现页面加载自动刷新数据 和 data()  methods 一级
  mounted() {
    this.refresh();
  },
    data() {
      return {
        http:this.config.ip,
        tableData: [],
        examine_case_data:{
          priority:""
        },
        dialogTableVisible: false,
        dialogFormVisible: false,
        up_dialogTableVisible: false,
        up_dialogFormVisible: false,
        create_case_form: {
          module_name: "",
          title: "",
          priority: "",
          precondition: "",
          operating_steps: "",
          expected_result: "",
          actual_result: "",
          test_result: "",
          bug: ""
        },
        update_case_form: {
          id:"",
          module_name: "",
          title: "",
          priority: "",
          precondition: "",
          operating_steps: "",
          expected_result: "",
          actual_result: "",
          test_result: "",
          bug: ""
        },
        formLabelWidth: '120px'
      }

    },


  }
</script>

<style scoped>

</style>
